<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="萌宠之家年卡"
      left-arrow
      @click-left="onClickLeft"
      color="#f8e176"
      fixed
      placeholder
    />
    <!-- 黑卡模块 -->
    <div class="black-mod">
      <div class="black-card">
        <img src="/img/vip/logo.png" alt="" />
        <span>萌宠之家</span>
        <div>
          <span> 9折年卡 </span>
          <span> 预计全年能省9元 </span>
        </div>
      </div>
    </div>
    <!-- 年卡特权 -->
    <div class="year">
      <span>″ 年卡特权 ″</span>
      <span>全年通用</span>
      <div class="year-kind">
        <div>
          <img src="/img/vip/cat.png" alt="" class="img" />
          <span>上门喂猫</span>
          <span>9折</span>
        </div>
        <div>
          <img src="/img/vip/dog.png" alt="" class="img" />
          <span>上门喂狗</span>
          <span>9折</span>
        </div>
        <div>
          <img src="/img/vip/pet.png" alt="" class="img" />
          <span>宠物寄养</span>
          <span>9折</span>
        </div>
      </div>
    </div>
    <!-- 使用流程 -->
    <div class="flow-path">
      <span>使用流程</span>
      <div>
        <van-steps
          :active="active"
          active-color="#f8e176"
          inactive-color="#f8e176"
        >
          <van-step>预定服务</van-step>
          <van-step>下单自动抵扣</van-step>
          <van-step>订单完成</van-step>
        </van-steps>
      </div>
    </div>
    <!-- 使用说明 -->
    <div class="hangtag">
      <div class="spans">
        <span>使用说明</span>
        <span>1、有效期至购买日起一年内有效。</span>
        <span>2、不可与其他优惠叠加使用。</span>
      </div>
      <div class="pay-btn">
        <van-button type="primary" size="large" color="#f8e176"
          >立即支付 ￥49/年</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: -4,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar__content {
  background-color: #ffffff;
  border-bottom: #f8e176;
}
// 左箭头
::v-deep .van-icon-arrow-left:before {
  color: #a7a7a7;
}

.black-mod {
  background-color: #f8e176;
  height: 42vw;
  width: 100vw;
  padding-top: 10vw;

  > .black-card {
    height: 100%;
    padding: 4vw 4vw;
    background-color: #4f4b5a;
    margin: 0px 4vw;
    border-top-left-radius: 0.7em;
    border-top-right-radius: 0.7em;
    position: relative;
    > img {
      width: 2em;
      margin-right: 0.5em;
    }
    > span {
      color: #e4e4e5;
      font-size: 1em;
      font-weight: 800;
    }
    > div {
      position: absolute;
      bottom: 0.7em;
      right: 0.7em;
      > span {
        color: #e4e4e5;
        font-size: 1em;
        font-weight: 700;
      }
      > span:last-child {
        margin-left: 2vw;
        font-size: 0.9em;
        font-weight: 500;
        color: #c5c4cf;
      }
    }
  }
}
.year {
  width: 100vw;
  height: 54vw;

  text-align: center;
  padding-top: 1px;
  > span:first-child {
    margin: 4vw;
    display: block;
    font-size: 19px;
    color: #ebc80a;
    font-weight: 550;
  }
  > span {
    font-size: 7px;
    color: #8c8a99;
  }
  .year-kind {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 70%;

    > div {
      width: 20vw;
      height: 30vw;
      margin: 5vw;
      > span {
        display: block;
        font-size: 14px;
        margin: 2vw;
      }
      > span:last-child {
        color: #8c8a99;
      }
    }
  }
}
.flow-path {
  border-top: 3vw solid #fafafa;
  border-bottom: 3vw solid #fafafa;
  width: 100%;
  height: 45vw;
  > span {
    display: block;
    margin: 5vw 4vw;
    font-size: 18px;
    font-weight: 600;
  }
}
.hangtag {
  position: relative;
  width: 100%;
  height: 60vw;
  .spans {
    span {
      display: block;
      margin: 3vw 4vw;
    }
    span:first-child {
      margin: 5vw 4vw;
      font-size: 18px;
      font-weight: 600;
    }
  }
  .pay-btn {
    width: 90vw;
    position: absolute;
    bottom: 4vw;
    right: 5vw;
  }
}

.img {
  width: 3em;
  padding: 0.5em;
  background-color: #fffae0;
  border-radius: 1.5em;
}
</style>
